<template>
    <div class="leftOne">
        <ThemeTitle :title="title" />
        <div class="landArea">
            <div class="landIcon">
                <img src="/data/images/hngk/ceng.png" alt="" />
            </div>
            <div class="landDetail">
                <div class="title">矿山企业总数</div>
                <div class="num">
                    <div class="" v-for="(item, index) in numList" :key="index">
                        {{ item }}
                    </div>
                    <div>家</div>
                </div>
            </div>
            <div class="sizeDetail">
                <div v-for="(item, index) in sizeList" :key="index">
                    <span>{{ item.name }}：</span>
                    <span>{{ item.val }}</span>
                </div>
            </div>
        </div>
        <div class="islandAndSea">
            <div
                class="islandArea"
                v-for="(item, index) in islandList"
                :key="index"
            >
                <div class="landName">{{ item.name }}</div>
                <div
                    class="landVal"
                    :class="{ yColor: index % 2 == 0, rColor: index % 2 !== 0 }"
                >
                    {{ item.val }}
                </div>
            </div>
        </div>
        <div class="twoChartContainer">
            <div class="twoTitle">
                <div>尾矿库等级统计</div>
                <div>尾矿库安全度统计</div>
            </div>
            <div class="geoIntro">
                <div id="levelChart"></div>
                <div id="safeChart"></div>
            </div>
        </div>
    </div>
</template>

<script>
import ThemeTitle from "../../common/ThemeTitle";
import {
    getCurrentInstance,
    onMounted,
    provide,
    onBeforeUnmount,
    reactive,
    watch,
} from "vue";
import echarts from "echarts";
import axios from "axios";
export default {
    components: {
        ThemeTitle,
    },
    props: {
        kzqyzs: Number,
        zxksqyzs: Number,
        xzksqyzs: Number,
        wxkaqyzs: Number,
        dxkssl: Number,
        ltkssl: Number,
        wkksl: Number,
        wkksldjtj: Array,
        wkkaqdtj: Array,
    },
    setup(props) {
        const title = provide("title", "矿山概况");
        const { ctx } = getCurrentInstance();
        let numList = reactive([0, 0]);
        const carouselList = [
            {
                imgSrc: "/data/images/hngk/haibian.jpg",
                dec: "海南省是中华人民共和国最南端的省级行政区，北以琼州海峡与广东划界，西临北部湾与广西、越南相对，东濒南海与台湾对望，东南和南部在南海与菲律宾、文莱、马来西亚为邻。",
            },
            {
                imgSrc: "/data/images/hngk/haibian.jpg",
                dec: "北以琼州海峡与广东划界，海南省是中华人民共和国最南端的省级行政区，西临北部湾与广西、越南相对，东濒南海与台湾对望，东南和南部在南海与菲律宾、文莱、马来西亚为邻。",
            },
            {
                imgSrc: "/data/images/hngk/haibian.jpg",
                dec: "西临北部湾与广西、越南相对，海南省是中华人民共和国最南端的省级行政区，北以琼州海峡与广东划界，东濒南海与台湾对望，东南和南部在南海与菲律宾、文莱、马来西亚为邻。",
            },
        ];
        let islandList = reactive([
            { name: "地下矿山", val: "5个" },
            { name: "露天矿山", val: "9个" },
            { name: "尾矿库", val: "2个" },
        ]);
        let sizeList = reactive([
            { name: "中型", val: "9家" },
            { name: "小型", val: "5家" },
            { name: "微型", val: "2家" },
        ]);
        let barChart = null;
        function drawBar(xData, yData) {
            var dom = document.getElementById("levelChart");
            barChart = echarts.init(dom);
            var option = {
                grid: [
                    {
                        //左侧的柱状图grid
                        width: "90%",
                        left: "1%",
                        top: "10%",
                        right: "0",
                        bottom: "0",
                    },
                ],
                xAxis: [
                    {
                        //左侧柱状图的X轴
                        gridIndex: 0, //x 轴所在的 grid 的索引
                        show: false,
                    },
                    {
                        //右侧柱状图的X轴
                        gridIndex: 1, //x 轴所在的 grid 的索引
                        show: false,
                    },
                ],
                yAxis: [
                    {
                        //左侧柱状图的Y轴
                        gridIndex: 0, //y轴所在的 grid 的索引
                        splitLine: "none",
                        axisTick: "none",
                        axisLine: "none",
                        axisLabel: {
                            verticalAlign: "bottom",
                            align: "left",
                            padding: [0, 0, 5, 15],
                            // textStyle: {
                            color: "#befbff",
                            fontSize: "12",
                            // }
                        },
                        data: yData,
                        inverse: true,
                    },
                    {
                        //左侧柱状图的Y轴
                        gridIndex: 0, //y轴所在的 grid 的索引
                        splitLine: "none",
                        axisTick: "none",
                        axisLine: "none",
                        data: xData,
                        inverse: true,
                        axisLabel: {
                            show: true,
                            verticalAlign: "bottom",
                            align: "right",
                            padding: [0, 20, 5, 0],
                            // textStyle: {
                            color: "#fff",
                            fontSize: "16",
                            // },
                            formatter: function (value) {
                                return "{x|" + value + "}  {y|" + "个}";
                            },
                            rich: {
                                y: {
                                    color: "#befbff",
                                    fontSize: 10,
                                },
                                x: {
                                    color: "#f6cf42",
                                    fontSize: 10,
                                },
                            },
                        },
                    },
                    {
                        //左侧柱状图的Y轴
                        gridIndex: 0, //y轴所在的 grid 的索引
                        splitLine: "none",
                        axisTick: "none",
                        axisLine: "none",
                        data: [],
                    },
                ],
                series: [
                    {
                        name: "",
                        type: "bar",
                        xAxisIndex: 0, //使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
                        yAxisIndex: 0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                        data: xData,
                        barWidth: 10,
                        itemStyle: {
                            color: "rgba(0,234,255,1)",
                            // color: echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                            //     offset: 0,
                            //     color: "#49bdff" // 0% 处的颜色
                            // }, {
                            //     offset: 1,
                            //     color: "#54ffd5" // 100% 处的颜色
                            // }], false),
                            borderRadius: 6,
                        },
                        z: 2,
                    },
                    {
                        name: "外框",
                        type: "bar",
                        xAxisIndex: 0, //使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
                        yAxisIndex: 2, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                        barGap: "-100%",
                        data: [10, 10, 10, 10, 10],
                        barWidth: 10,
                        itemStyle: {
                            color: "#2d5271",
                            borderRadius: 6,
                        },
                        z: 0,
                    },
                ],
            };
            barChart.setOption(option);
            window.addEventListener("resize", () => {
                barChart.resize();
            });
        }
        let safeChart = null;
        function drawSafe(safeXdata, safeYdata) {
            var dom = document.getElementById("safeChart");
            safeChart = echarts.init(dom);
            let dataMax = 20;
            const source = {
                data: safeXdata,
                indicator: [
                    { name: safeYdata[0], max: dataMax },
                    { name: safeYdata[1], max: dataMax },
                    { name: safeYdata[2], max: dataMax },
                    { name: safeYdata[3], max: dataMax },
                ],
            };
            const buildSeries = function (data) {
                const helper = data.map((item, index) => {
                    const arr = new Array(data.length);
                    arr.splice(index, 1, item);
                    return arr;
                });
                return [data, ...helper].map((item, index) => {
                    return {
                        type: "radar",
                        center: ["50%", "40%"],
                        itemStyle: {
                            color: "#31e586",
                        },
                        lineStyle: {
                            color: index === 0 ? "#31e586" : "transparent",
                        },
                        areaStyle: {
                            color: index === 0 ? "#31e586" : "transparent",
                            opacity: 0.3,
                        },
                        tooltip: {
                            show: index === 0 ? false : true,
                            formatter: function () {
                                return (
                                    source.indicator[index - 1].name +
                                    "：" +
                                    source.data[index - 1]
                                );
                            },
                        },
                        z: index === 0 ? 1 : 2,
                        data: [item],
                    };
                });
            };

            var option = {
                tooltip: {},
                grid: {
                    x: 400,
                    x2: 100,
                    y2: 150,
                },
                radar: {
                    // shape: 'circle',
                    radius: "55%",
                    name: {
                        textStyle: {
                            fontSize: 12,
                            color: ["#d1dbf2"],
                            padding: [-10, -10],
                        },
                    },
                    splitNumber: 4,
                    splitArea: {
                        show: true,
                        areaStyle: {
                            color: [
                                "rgba(12,62,129,0)",
                                "rgba(12,62,129,0.3)",
                                "rgba(12,62,129,0)",
                                "rgba(12,62,129,0)",
                            ],
                        },
                    },
                    splitLine: {
                        lineStyle: {
                            color: "#0c3e81",
                        },
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#0c3e81",
                        },
                    },
                    indicator: source.indicator,
                },
                series: buildSeries(source.data),
            };

            safeChart.setOption(option);
            window.addEventListener("resize", () => {
                safeChart.resize();
            });
        }
        watch(
            () => [
                props.kzqyzs,
                props.zxksqyzs,
                props.xzksqyzs,
                props.wxkaqyzs,
                props.dxkssl,
                props.ltkssl,
                props.wkksl,
                props.wkksldjtj,
                props.wkkaqdtj,
            ],
            ([
                kzqyzs,
                zxksqyzs,
                xzksqyzs,
                wxkaqyzs,
                dxkssl,
                ltkssl,
                wkksl,
                wkksldjtj,
                wkkaqdtj,
            ]) => {
                numList = Array.from(kzqyzs);
                sizeList[0].val = zxksqyzs + "家";
                sizeList[1].val = xzksqyzs + "家";
                sizeList[2].val = wxkaqyzs + "家";
                islandList[0].val = dxkssl + "个";
                islandList[1].val = ltkssl + "个";
                islandList[2].val = wkksl + "个";
                let barXData = wkksldjtj.map((item, index) => {
                    return item.sl;
                });
                let barYData = wkksldjtj.map((item, index) => {
                    return item.dj;
                });
                drawBar(barXData, barYData);
                let safeYdata = wkkaqdtj.map((item, index) => {
                    return item.dj;
                });
                let safeXdata = wkkaqdtj.map((item, index) => {
                    return item.sl;
                });
                drawSafe(safeXdata, safeYdata);
            }
        );
        onBeforeUnmount(() => {
            if (barChart) {
                echarts.dispose(barChart);
            }
            if (safeChart) {
                echarts.dispose(safeChart);
            }
        });
        onMounted(() => {});
        return {
            numList,
            carouselList,
            title,
            islandList,
            sizeList,
        };
    },
};
</script>

<style lang="stylus" scoped>
@media (max-width: 2880px) {
    .leftOne {
        .landArea {
            width: vw(365);
            height: vh(132);
            margin-top: vh(25);
            background: url('/data/images/hngk/bigrec.png') no-repeat;
            background-size: 100% 100%;
            padding: vh(25) vw(28) vh(28) vw(33);
            display: flex;
            align-items: center;

            .landIcon {
                margin-right: vw(20);
            }

            .landDetail {
                width: vw(180);

                .title {
                    font-size: vw(18);
                    cursor: pointer;
                }

                .num {
                    display: flex;
                    justify-content: flex-start;
                    margin-top: vh(17);

                    div {
                        flex-shrink: 0;
                        width: vw(29);
                        height: vh(45);
                        margin-right: vw(5);
                        line-height: vh(45);
                        font-size: vw(26);
                        background: url('/data/images/hngk/num.png') no-repeat;
                        background-size: 100% 100%;
                        text-align: center;
                    }

                    div:last-child {
                        font-size: vw(16);
                        background: none;
                        flex-shrink: 0;
                        width: vw(18);
                    }
                }
            }

            .sizeDetail {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                height: vh(80);
                font-size: vw(12);
            }
        }

        .islandAndSea {
            width: vw(364);
            height: vh(100);
            margin-top: vh(17);
            display: flex;
            justify-content: space-between;
            background: url('/data/images/hngk/littlerec.png') no-repeat;
            background-size: 100% 100%;

            .islandArea {
                width: vw(90);
                height: vh(100);
                text-align: center;

                .landName {
                    line-height: vh(50);
                    width: 100%;
                    font-size: vw(14);
                    cursor: pointer;
                }

                .landVal {
                    line-height: vh(50);
                    width: 100%;
                    font-size: vw(19);
                }

                .yColor {
                    color: rgba(255, 188, 50, 1);
                }

                .rColor {
                    color: rgba(255, 57, 118, 1);
                }
            }
        }

        .twoChartContainer {
            .geoIntro {
                width: vw(365);
                height: vh(220);
                margin-top: vh(5);
                margin-bottom: vh(25);
                display: flex;

                #levelChart {
                    // flex-shrink:0
                    width: vw(182);
                    height: vh(220);
                }

                #safeChart {
                    // flex-shrink:0
                    width: vw(182);
                    height: vh(220);
                }
            }

            .twoTitle {
                display: flex;
                justify-content: space-around;

                div {
                    color: rgba(0, 234, 255, 1);
                    flex: 1;
                    font-size: vw(16);
                    text-align: center;
                    height: vh(50);
                    line-height: vh(60);
                }
            }
        }
    }
}
</style>
<style lang="stylus" scoped>
@media (min-width: 3000px) {
    .leftOne {
        .landArea {
            width: vw1(414);
            height: vh(260);
            margin-top: vh(25);
            background: url('/data/images/hngk/bigrec.png') no-repeat;
            background-size: 100% 100%;
            padding: vh(25) vw1(28) vh(28) vw1(33);
            display: flex;
            align-items: center;

            .landIcon {
                margin-right: vw1(20);
            }

            .landDetail {
                width: vw1(180);

                .title {
                    font-size: vw1(18);
                    cursor: pointer;
                }

                .num {
                    display: flex;
                    justify-content: flex-start;
                    margin-top: vh(17);

                    div {
                        flex-shrink: 0;
                        width: vw1(29);
                        height: vh(45);
                        margin-right: vw1(5);
                        line-height: vh(45);
                        font-size: vw1(26);
                        background: url('/data/images/hngk/num.png') no-repeat;
                        background-size: 100% 100%;
                        text-align: center;
                    }

                    div:last-child {
                        font-size: vw1(16);
                        background: none;
                        flex-shrink: 0;
                        width: vw1(18);
                    }
                }
            }

            .sizeDetail {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                height: vh(80);
                font-size: vw1(12);
            }
        }

        .islandAndSea {
            width: vw1(414);
            height: vh(200);
            margin-top: vh(17);
            display: flex;
            justify-content: space-between;
            background: url('/data/images/hngk/littlerec.png') no-repeat;
            background-size: 100% 100%;

            .islandArea {
                width: vw1(90);
                height: vh(100);
                text-align: center;

                .landName {
                    line-height: vh(50);
                    width: 100%;
                    font-size: vw1(14);
                    cursor: pointer;
                }

                .landVal {
                    line-height: vh(50);
                    width: 100%;
                    font-size: vw1(19);
                }

                .yColor {
                    color: rgba(255, 188, 50, 1);
                }

                .rColor {
                    color: rgba(255, 57, 118, 1);
                }
            }
        }

        .twoChartContainer {
            position: absolute;
            right: 0;
            top: 0;

            .geoIntro {
                width: vw1(414);
                height: vh(440);
                margin-top: vh(5);
                margin-bottom: vh(25);

                #levelChart {
                    // flex-shrink:0
                    width: vw1(414);
                    height: vh(220);
                }

                #safeChart {
                    // flex-shrink:0
                    width: vw1(414);
                    height: vh(220);
                }
            }

            .twoTitle {
                width: vw1(414);
                display: flex;
                justify-content: space-around;

                div {
                    color: rgba(0, 234, 255, 1);
                    flex: 1;
                    font-size: vw1(16);
                    text-align: center;
                    height: vh(50);
                    line-height: vh(60);
                }
            }
        }
    }
}
</style>